<template>
  <div>
    <div v-if="ritta === true" class="login-contain">
      <div class="login-header">
        <p>欢迎登录</p>
      </div>
      <div class="login-logo" align="center">
        <img src="../../assets/kuai.png" alt />
        <p>快上车APP</p>
      </div>
      <div class="form-group">
        <div class="form-item">
          <label for="phone">
            <img src="../../assets/png/用户.png" alt />
          </label>
          <input v-model="text" type="text" placeholder="请输入用户名" />
        </div>
        <div class="form-item">
          <label for="code">
            <img src="../../assets/png/密码.png" alt />
          </label>
          <input v-model="pass" type="password" placeholder="请输入密码" />
        </div>
      </div>
      <div class="button-group">
        <button @click="goa" class="login-btn">登录</button>
        <button @click="ritta  = false" class="login-register">注册</button>
      </div>
      <div class="casual"></div>
      <div class="order-login">
        <p>使用第三方账号登录</p>
        <ul>
          <li>
            <a href="#">
              <img src="../../assets/png/QQ.png" alt />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../../assets/png/WeChat.png" alt />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../../assets/png/weibo.png" alt />
            </a>
          </li>
        </ul>
      </div>
      <div class="copyright">该技术由如你所喜欢提供</div>
    </div>
    <!-- 注册 -->
    <div v-if="ritta === false">
      <div class="login_bbg">
        <div class="register-contain">
          <div class="register-header">
            <a @click="ritta = true">
              《
              <span>注册</span>
            </a>
          </div>

          <div class="form-group">
            <div class="form-item">
              <label for="phone">
                <img src="../../assets/png/手机.png" alt />
              </label>
              <input id="phone" type="text" placeholder="请输入手机号" />
            </div>
            <div class="form-item">
              <label for="code">
                <img src="../../assets/png/验证码.png" alt />
              </label>
              <input id="code" type="number" placeholder="请输入验证码" />
              <button>发送验证码</button>
            </div>
            <div class="form-item">
              <label for="password">
                <img src="../../assets/png/密码.png" alt />
              </label>
              <input id="password" type="password" placeholder="请填写密码" />
            </div>
            <div class="form-item">
              <label for="respassword">
                <img src="../../assets/png/密码.png" alt />
              </label>
              <input id="respassword" type="password" placeholder="请确认密码" />
            </div>
          </div>
          <div class="button-group">
            <button class="login-btn">注册</button>
          </div>
          <div class="authorization">
            <input type="checkbox" />
            <span class="ml-5">注册使用即表示同意</span>
            <span class="protocol">用户协议及版权声明</span>
          </div>
          <div class="go-login">
            <a @click="ritta = true">已经有账号？去登录</a>
          </div>
          <div class="tourism">
            <!-- <img src="image/tourism.png" alt />
        <img src="image/tourism2.png" alt />
            <img src="image/tourism3.png" alt />-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getBook } from "./api/index";
export default {
  data() {
    return {
      ritta: true,
      text: "",
      pass: "",
      // book: [],
      textt: "",
      passs: "",
      ok: ""
    };
  },
  // mounted() {
  // getBook().then(res => {
  //   this.book = res.data;
  // console.log(this.book);
  // });
  // },
  methods: {
    goa() {
      // const a = this.book.user;
      // const b = this.book.pass;
      // console.log(a, b);
      if (this.text.trim() === "" || this.pass.trim() === "") {
        this.$message({
          message: "输入框不能为空！",
          type: "warning"
        });
      } else {
        if (this.text === "11" && this.pass === "11") {
          this.$message({
            message: "登陆完成！",
            type: "success"
          });
          this.$store.commit("setUp", true);
          //跳转到首页
          this.$router.replace("/home");
        } else {
          this.$message({
            message: "密码或用户名错误！",
            type: "warning"
          });
        }
      }
    }
    // goo() {
    //   if (this.textt.trim() === "" || this.passs.trim() === "") {
    //     this.$message({
    //       message: "输入框不能为空！",
    //       type: "warning"
    //     });
    //   } else {
    //     if (this.passs === this.ok) {
    //       this.$message({
    //         message: "注册成功！",
    //         type: "success"
    //       });
    //     } else {
    //       this.$message({
    //         message: "两次输入密码不一致！",
    //         type: "warning"
    //       });
    //     }
    //   }
    // }
  }
};
</script>

<style lang="scss" scoped>
.f-left {
  float: left;
}
a,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
/*
鐧诲綍鐣岄潰--start*/
.login-bg {
  background: black;
  background-size: cover;
  color: #ffffff;
}
.login-contain {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100vh;
}
.login-header {
  padding: 5%;
}
.login-header p {
  font-size: 20px;
  color: #ffffff;
  text-align: center;
}
.login-logo {
  padding: 5%;
}
.login-logo img {
  width: 120px;
  height: 80px;
  border-radius: 10%;
}
.login-logo p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 2px;
  margin-top: 2%;
}
.form-group {
  padding: 5%;
}
.form-group .form-item {
  border-bottom: 1px #ffffff solid;
  margin-top: 5%;
}
.form-group .form-item input {
  outline: none;
  border: 0;
  background-color: transparent;
  color: #ffffff;
  height: 40px;
  font-size: 18px;
  width: 55%;
  margin-left: 12%;
}
.form-group .form-item input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ffffff;
  font-size: 16px;
}
.form-group .form-item input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ffffff;
  font-size: 16px;
}
.form-group .form-item input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ffffff;
  font-size: 16px;
}
.form-group .form-item input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #ffffff;
  font-size: 16px;
}
.form-group .form-item label img {
  width: 25px;
  position: absolute;
  margin-top: 2%;
}
.form-group .form-item button {
  outline: none;
  background: transparent;
  border: 1px #00cc99 dashed;
  color: #ffffff;
  height: 30px;
  border-radius: 5px;
  float: right;
  padding: 1%;
}
.button-group {
  padding: 5%;
}
.button-group button {
  outline: none;
  border: 0;
  width: 90%;
  height: 35px;
  margin-top: 4%;
  border-radius: 20px;
  margin-left: 4%;
  color: #ffffff;
  font-size: 18px;
}
.button-group .login-btn {
  background-color: #00cc99;
}
.button-group .login-register {
  background: transparent;
  border: 1px #ffffff solid;
}
.casual {
  text-align: center;
}
.casual a {
  color: #ffffff;
  font-size: 18px;
}
.order-login {
  padding: 5%;
}
.order-login p {
  display: block;
  /*璁剧疆涓哄潡绾у厓绱犱細鐙崰涓€琛屽舰鎴愪笂涓嬪眳涓殑鏁堟灉*/
  position: relative;
  /*瀹氫綅妯嚎锛堝綋妯嚎鐨勭埗鍏冪礌锛�*/
  text-align: center;
  font-size: 14px;
  color: #cccccc;
}
.order-login ul {
  margin-left: 25%;
  margin-top: 5%;
  height: 40px;
}
.order-login ul li {
  width: 25%;
  float: left;
}
.order-login ul li a img {
  width: 35px;
  height: 35px;
}
.order-login p:before,
.order-login p:after {
  content: "";
  position: absolute;
  /*瀹氫綅鑳屾櫙妯嚎鐨勪綅缃�*/
  top: 50%;
  background: #cccccc;
  /*鑳屾櫙妯嚎棰滆壊*/
  width: 20%;
  /*鍗曚晶妯嚎鐨勯暱搴�*/
  height: 1px;
}
.order-login p:before {
  left: 10%;
  /*璋冩暣鑳屾櫙妯嚎鐨勫乏鍙宠窛绂�*/
}
.order-login p:after {
  right: 10%;
}
.copyright {
  text-align: center;
  padding: 2%;
}
/*
娉ㄥ唽椤甸潰--start*/
.bg-register {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
}
.register-header {
  padding: 5%;
}
.register-header a {
  font-size: 20px;
  color: #f2f2f2;
  font-weight: bold;
}
.register-header a span {
  font-size: 18px;
  margin-left: 2%;
}
.authorization {
  padding: 0 5%;
  font-size: 14px;
}
.authorization input {
  width: 18px;
  height: 18px;
  position: absolute;
  margin-left: 6%;
}
.protocol {
  color: #00cc99;
  text-decoration: underline;
}
.ml-5 {
  margin-left: 13%;
}
.go-login {
  padding: 5%;
}
.go-login a {
  color: #ffffff;
  float: right;
}
.tourism {
  padding: 5%;
}
.tourism img {
  margin-left: 10%;
  margin-top: 20%;
}
// 注册的
.login_bbg {
  background: rgba(0, 0, 0, 0.4);
  background-size: cover;
  color: #ffffff;
  width: 100%;
  height: 100vh;

  .login-contain {
    background-color: rgba(0, 0, 0, 0.4);
  }
  .login-header {
    padding: 5%;
  }
  .login-header p {
    font-size: 20px;
    color: #ffffff;
    text-align: center;
  }
  .login-logo {
    padding: 5%;
  }
  .login-logo img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
  }
  .login-logo p {
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2px;
    margin-top: 2%;
  }
  .form-group {
    padding: 5%;
  }
  .form-group .form-item {
    border-bottom: 1px #ffffff solid;
    margin-top: 5%;
  }
  .form-group .form-item input {
    outline: none;
    border: 0;
    background-color: transparent;
    color: #ffffff;
    height: 40px;
    font-size: 18px;
    width: 55%;
    margin-left: 12%;
  }
  .form-group .form-item input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #ffffff;
    font-size: 16px;
  }
  .form-group .form-item input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #ffffff;
    font-size: 16px;
  }
  .form-group .form-item input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #ffffff;
    font-size: 16px;
  }
  .form-group .form-item input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #ffffff;
    font-size: 16px;
  }
  .form-group .form-item label img {
    width: 25px;
    position: absolute;
    margin-top: 2%;
  }
  .form-group .form-item button {
    outline: none;
    background: transparent;
    border: 1px #00cc99 dashed;
    color: #ffffff;
    height: 30px;
    border-radius: 5px;
    float: right;
    padding: 1%;
  }
  .button-group {
    padding: 5%;
  }
  .button-group button {
    outline: none;
    border: 0;
    width: 90%;
    height: 35px;
    margin-top: 4%;
    border-radius: 20px;
    margin-left: 4%;
    color: #ffffff;
    font-size: 18px;
  }
  .button-group .login-btn {
    background-color: #00cc99;
  }
  .button-group .login-register {
    background: transparent;
    border: 1px #ffffff solid;
  }
  .casual {
    text-align: center;
  }
  .casual a {
    color: #ffffff;
    font-size: 18px;
  }
  .order-login {
    padding: 5%;
  }
  .order-login p {
    display: block;
    /*璁剧疆涓哄潡绾у厓绱犱細鐙崰涓€琛屽舰鎴愪笂涓嬪眳涓殑鏁堟灉*/
    position: relative;
    /*瀹氫綅妯嚎锛堝綋妯嚎鐨勭埗鍏冪礌锛�*/
    text-align: center;
    font-size: 14px;
    color: #cccccc;
  }
  .order-login ul {
    margin-left: 25%;
    margin-top: 5%;
    height: 40px;
  }
  .order-login ul li {
    width: 25%;
    float: left;
  }
  .order-login ul li a img {
    width: 35px;
    height: 35px;
  }
  .order-login p:before,
  .order-login p:after {
    content: "";
    position: absolute;
    /*瀹氫綅鑳屾櫙妯嚎鐨勪綅缃�*/
    top: 50%;
    background: #cccccc;
    /*鑳屾櫙妯嚎棰滆壊*/
    width: 20%;
    /*鍗曚晶妯嚎鐨勯暱搴�*/
    height: 1px;
  }
  .order-login p:before {
    left: 10%;
    /*璋冩暣鑳屾櫙妯嚎鐨勫乏鍙宠窛绂�*/
  }
  .order-login p:after {
    right: 10%;
  }
  .copyright {
    text-align: center;
    padding: 2%;
  }
  /*
娉ㄥ唽椤甸潰--start*/
  .bg-register {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
  }
  .register-header {
    padding: 5%;
  }
  .register-header a {
    font-size: 20px;
    color: #f2f2f2;
    font-weight: bold;
  }
  .register-header a span {
    font-size: 18px;
    margin-left: 2%;
  }
  .authorization {
    padding: 0 5%;
    font-size: 14px;
  }
  .authorization input {
    width: 18px;
    height: 18px;
    position: absolute;
    margin-left: 6%;
  }
  .protocol {
    color: #00cc99;
    text-decoration: underline;
  }
  .ml-5 {
    margin-left: 13%;
  }
  .go-login {
    padding: 5%;
  }
  .go-login a {
    color: #ffffff;
    float: right;
  }
  .tourism {
    padding: 5%;
  }
  .tourism img {
    margin-left: 10%;
    margin-top: 20%;
  }
}
</style>